import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, message, Button } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import { connect } from 'dva';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import StandardTable from '@/components/StandardTable';

const { Description } = DescriptionList;

@connect(({ oncepayns, loading }) => ({
  loading: loading.models.oncepayns,
  detailDataList: oncepayns.detailDataList, // 员工明细
}))
@Form.create()
class ClientInfoDetails extends PureComponent {
  state = {
    nowPage: 1,
    pageNum: 10,
    selectedRowKeys: [],
    selectedRows: [],
    detailData: [],
    onceFeePayId: null,
  };

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { onceFeePayId } = queryString.parse(location.search);
    const { nowPage, pageNum } = this.state;
    dispatch({
      type: 'oncepayns/onceNsDetail',
      payload: {
        onceFeePayId,
      },
    }).then(res => {
      if (res.success && res.data) {
        this.setState({
          detailData: res.data,
          onceFeePayId,
        });
      } else {
        message.warning(`${res.message || '暂无数据！'}`);
      }
    });
    this.getList(nowPage, pageNum, onceFeePayId);
  }

  getList = (currentPage, pageSize, onceFeeId) => {
    const pageArg = {
      currentPage,
      pageSize,
    };
    const { dispatch } = this.props;
    dispatch({
      type: 'oncepayns/onceNsDetailList',
      payload: {
        pageArg,
        onceFeePayId: onceFeeId,
      },
    });
  };

  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({
      selectedRowKeys,
      selectedRows,
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { onceFeePayId } = this.state;
    this.getList(pagination.current, pagination.pageSize, onceFeePayId);
  };

  // 解析参数
  urlParse = () => {
    const { location } = this.props;
    const url = location.search;
    const obj = {};
    if (url.indexOf('?') !== -1) {
      const str = url.substr(1);
      const strs = str.split('&');
      strs.forEach(item => {
        obj[item.split('=')[0]] = unescape(item.split('=')[1]);
      });
    }
    return obj;
  };

  render() {
    const { detailData, selectedRowKeys, selectedRows } = this.state;
    const { loading, detailDataList } = this.props;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件类型',
        dataIndex: 'idTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idNo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收费金额',
        dataIndex: 'feeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人金额',
        dataIndex: 'perAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业金额',
        dataIndex: 'comAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '服务费',
        dataIndex: 'fee',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'right',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '备注',
        dataIndex: 'remark',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card
          title={<span style={{ fontWeight: 'bolder' }}>基本信息</span>}
          style={{ marginBottom: 12 }}
          bordered={false}
        >
          {Number(detailData.feeWay) === 1 ? (
            <DescriptionList style={{ marginBottom: 12 }}>
              <Description term="产品">{detailData.pdName || '--'}</Description>
              <Description term="收费方式">{detailData.feeWayName || '--'}</Description>
              <Description term="接单方">{detailData.ordSndrName || '--'}</Description>
              <Description term="客户">
                {`${detailData.custName}（${detailData.custNo}）` || '--'}
              </Description>
              <Description term="业务年月">
                {detailData.busiYm
                  ? `${`${detailData.busiYm}`.substring(0, 4)}-${`${detailData.busiYm}`.substring(
                      4
                    )}`
                  : '--'}
              </Description>
              <Description term="收费总金额">
                {detailData.feeAmo === 0 ? 0 : (detailData.feeAmo && detailData.feeAmo) || '--'}
              </Description>
              <Description term="状态">{detailData.feeStaName || '--'}</Description>

              <Description term="编号">{detailData.onceFeePayNo || '--'}</Description>
              <Description term="接单方发送时间">
                {moment(detailData.creTime).format('YYYY-MM-DD HH:mm') || '--'}
              </Description>
              <Description term="接单方发送人">{detailData.creName || '--'}</Description>
              <Description term="备注">{detailData.remark || '--'}</Description>
              <Description term="确认支付时间">
                {detailData.operTime
                  ? moment(detailData.operTime).format('YYYY-MM-DD HH:mm:ss')
                  : '--'}
              </Description>
              <Description term="确认支付人员">{detailData.operName || '--'}</Description>
            </DescriptionList>
          ) : (
            <DescriptionList style={{ marginBottom: 12 }}>
              <Description term="产品">{detailData.pdName || '--'}</Description>
              <Description term="收费方式">{detailData.feeWayName || '--'}</Description>
              <Description term="签约方">{detailData.ordSndrName || '--'}</Description>
              <Description term="客户">
                {`${detailData.custName}（${detailData.onceFeePayNo}）` || '--'}
              </Description>
              <Description term="业务年月">
                {detailData.busiYm
                  ? `${`${detailData.busiYm}`.substring(0, 4)}-${`${detailData.busiYm}`.substring(
                      4
                    )}`
                  : '--'}
              </Description>
              <Description term="收费总金额">
                {detailData.feeAmo === 0 ? 0 : (detailData.feeAmo && detailData.feeAmo) || '--'}
              </Description>
              <Description term="收费年月">
                {detailData.feeYm
                  ? `${`${detailData.feeYm}`.substring(0, 4)}-${`${detailData.feeYm}`.substring(4)}`
                  : '--'}
              </Description>
              <Description term="状态">{detailData.feeStaName || '--'}</Description>
              <Description term="编号">{detailData.onceFeePayNo || '--'}</Description>
              <Description term="创建时间">
                {moment(detailData.creTime).format('YYYY-MM-DD HH:mm') || '--'}
              </Description>
              <Description term="创建人">{detailData.creName || '--'}</Description>
              <Description term="备注">{detailData.remark || '--'}</Description>
              <Description term="确认支付时间">
                {detailData.operTime
                  ? moment(detailData.operTime).format('YYYY-MM-DD HH:mm:ss')
                  : '--'}
              </Description>
              <Description term="确认支付人员">{detailData.operName || '--'}</Description>
            </DescriptionList>
          )}
        </Card>
        <Card
          title={<span style={{ fontWeight: 'bolder' }}>员工明细</span>}
          style={{ marginBottom: 12 }}
          bordered={false}
        >
          <StandardTable
            selectedRows={selectedRows}
            selectedRowKeys={selectedRowKeys}
            rowSelection={null}
            loading={loading}
            data={detailDataList}
            columns={columns}
            rowKey="idNo"
            onSelectRow={this.handleSelectRows}
            onChange={this.handleStandardTableChange}
          />
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={() => router.goBack()}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default ClientInfoDetails;
